<template>
  <div class="common-layout">
    <el-container  >
      <el-header >

        <div style="height: 6px;background-color: #fafafa;margin-top: -10px;margin-left: -30px;margin-right: -20px"></div>
      <el-menu mode="horizontal" default-active="4" active-text-color="green" text-color="black">
        <el-menu-item style="margin:  0 300px">
          <img src="img1/logo1.png" width="280px" height="100%" alt=""></el-menu-item>
        <el-menu-item index="2" style="margin: 0 0 0 10px " class="daohang"><router-link to="/">首页</router-link></el-menu-item>
        <el-menu-item index="3" class="daohang"><router-link to="/part">成为合作伙伴</router-link></el-menu-item>
        <el-menu-item index="4" class="daohang">合作伙伴能力</el-menu-item>
        <el-menu-item index="5" class="daohang"><router-link to="/grow">合作伙伴成长</router-link></el-menu-item>
        <el-menu-item index="6" class="daohang"><router-link to="/file">文档中心</router-link></el-menu-item>
      </el-menu>

      </el-header>

      <el-main>
        <div style="position: relative;"> <!-- 假设高度为500px -->
          <img src="bj.png" style="width: 100%; height: 100%; object-fit: cover;" alt="背景图片">
        </div>
        <el-row style="  display: flex;justify-content: center; align-items: center;margin-top: -200px">
          <el-col :offset="6" :span="12" style="text-align: center;">
            <!-- 注意移除了 position: relative，因为它可能会导致布局问题 -->
            <el-card style="margin:0 auto;width: 1023px;height: 710px ;border-radius: 5px ;margin-bottom: 45px;margin-left: -100px" > <!-- 修改为 margin: 20px auto 以实现水平居中 -->
              <div style="font-size: 35px;margin-bottom: 40px;margin-top: 40px">平台能力</div>
              <p style="color: darkgrey;margin-bottom: 43px">微信支付推出支付、经营、资金多种产品能力，助力合作伙伴为商家提供服务</p>
              <div>
                <el-button class="my-button" style="border: none; background-color: transparent;  " @click="showCard = 'card1'">
                  <div style="font-size:15px;margin-bottom: 20px ">支付产品</div>
                </el-button>
                <el-button style="border: none ; background-color: transparent;" @click="showCard = 'card2'">

                  <div style="font-size:15px;margin-bottom: 20px;margin-left: 25px ">经营工具</div>
                </el-button>

                <div v-if="showCard === 'card1'">
                  <el-row>
                    <el-col :span="8">
                      <el-card class="card" style="width: 341px; height: 233px;margin-left: -20px; border-left: none;" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><svg t="1715957700536" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3668" width="200" height="200"><path d="M971.499905 107.548089A114.092989 114.092989 0 0 0 855.695916 0.0161H169.142983A114.092989 114.092989 0 0 0 55.049995 107.834089L0 498.887051a109.529989 109.529989 0 0 0 59.327994 96.122991v305.19797a124.645988 124.645988 0 0 0 125.216988 123.789988h656.032936c85.569992 0 125.216988-53.622995 125.216988-123.789988V596.150042a109.813989 109.813989 0 0 0 61.039994-97.263991z m-69.596993 792.659923a55.049995 55.049995 0 0 1-60.468994 59.042994H185.400982a59.898994 59.898994 0 0 1-60.469994-59.042994V609.270041h776.971924z m10.839999-355.683965h-798.649922a48.489995 48.489995 0 0 1-50.200995-43.639996l54.193994-390.768962a51.056995 51.056995 0 0 1 51.056995-45.350995h686.552933a49.915995 49.915995 0 0 1 50.485996 45.350995l57.045994 390.767962a48.489995 48.489995 0 0 1-50.485995 43.639996z" p-id="3669"></path><path d="M804.068921 287.530072h-596.419941a35.083997 35.083997 0 0 0 0 70.451993h596.419941a35.083997 35.083997 0 1 0 0-70.451993z" p-id="3670"></path></svg></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">门店收款</p>
                        <p class="hover-text" style="color: darkgrey;">为商家的线下门店接入微信支付，完成收款需求</p>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card class="card"style="width: 341px; height: 233px;margin-left: -15px;" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><Tickets /></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">公众号收款</p>
                        <p class="hover-text" style="color: darkgrey;">为商家的公众号接入微信支付，完成收款需求</p>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card  class="card" style="width: 350px; height: 233px;border-left: none;margin-left: -1px;" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><svg t="1715957752409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4651" width="200" height="200"><path d="M626.176 279.552c74.24 0 134.656 55.808 134.656 124.928 0 21.504-6.144 42.496-17.408 61.44-16.896 27.648-44.032 48.128-76.8 57.856-8.704 2.56-15.36 3.584-21.504 3.584-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6c1.024 0 3.072 0 5.632-1.024 22.016-6.144 39.424-18.944 49.152-35.84 6.656-10.752 9.728-22.528 9.728-34.816 0-40.448-37.376-73.728-82.944-73.728-15.872 0-31.232 4.096-45.056 11.776-24.064 13.824-38.4 36.864-38.4 61.952v214.528c0 43.52-24.064 83.456-64 105.984-21.504 12.288-45.568 18.432-70.144 18.432-74.24 0-134.656-55.808-134.656-124.928 0-21.504 6.144-42.496 17.408-61.44 16.896-27.648 44.032-48.128 76.8-57.856 9.216-2.56 15.36-3.584 21.504-3.584 14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6c-1.024 0-3.072 0-5.632 1.024-22.016 6.656-39.424 19.456-49.152 35.84-6.656 10.752-9.728 22.528-9.728 34.816 0 40.448 37.376 73.728 83.456 73.728 15.872 0 31.232-4.096 45.056-11.776 24.064-13.824 38.4-36.864 38.4-61.952V404.48c0-43.52 24.064-83.456 64-105.984 20.992-12.8 45.056-18.944 69.632-18.944z m-520.704 230.4c0 226.304 183.296 409.6 409.6 409.6s409.6-183.296 409.6-409.6-183.296-409.6-409.6-409.6-409.6 183.296-409.6 409.6z m-51.2 0c0-254.464 206.336-460.8 460.8-460.8s460.8 206.336 460.8 460.8-206.336 460.8-460.8 460.8-460.8-206.336-460.8-460.8z m0 0" fill="" p-id="4652"></path></svg></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">小程序收款</p>
                        <p class="hover-text" style="color: darkgrey;">为商家的小程序接入微信支付，完成收款需求</p>
                      </el-card>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-card class="card" style="width: 341px; height: 233px;margin-left: -28px; border-left: none;border-top: none;border-bottom: none" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><svg t="1715998714556" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37489" width="200" height="200"><path d="M160 128a32 32 0 1 0 0 64 32 32 0 0 0 0-64z m128 0a32 32 0 1 0 0 64 32 32 0 0 0 0-64z m640-128H96a96 96 0 0 0-96 96v832a96 96 0 0 0 96 96h832a96 96 0 0 0 96-96V96a96 96 0 0 0-96-96z m32 896a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V320h896v576z m0-640H64V128a64 64 0 0 1 64-64h768a64 64 0 0 1 64 64v128zM416 128a32 32 0 1 0 0 64 32 32 0 0 0 0-64z" p-id="37490"></path></svg></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">网页收款</p>
                        <p class="hover-text" style="color: darkgrey;">为商家的网页接入微信支付，完成收款需求</p>
                      </el-card>
                    </el-col>

                    <el-col :span="8">
                      <el-card  class="card" style="width: 341px; height: 233px;border-top: none;margin-left: -15px;margin-right: -10px;border-bottom: none" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><svg t="1715998250647" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32826" width="200" height="200"><path d="M623.3 467.5h169.2v-0.1c127.9-1.2 231.5-105.5 231.5-233.7C1024 104.9 919.1 0 790.3 0S556.5 104.9 556.5 233.7c0 0.7 0 1.5 0.1 2.2h-0.1v164.7c0 36.9 30 66.9 66.8 66.9zM601 236c0.1-0.8 0-1.5 0-2.3 0-104.3 84.9-189.2 189.2-189.2s189.2 84.9 189.2 189.2c0 103.6-83.7 188-187 189.2v0.1H623.3c-12.3 0-22.3-10-22.3-22.3V236zM233.7 0C104.9 0 0 104.9 0 233.7c0 128.1 103.7 232.5 231.5 233.7v0.1h169.2c36.8 0 66.8-30 66.8-66.8V236h-0.1c0-0.7 0.1-1.5 0.1-2.2C467.5 104.9 362.6 0 233.7 0zM423 235.9v164.8c0 12.3-10 22.3-22.3 22.3H231.5v-0.1c-103.3-1.2-187-85.6-187-189.2 0-104.3 84.9-189.2 189.2-189.2S423 129.4 423 233.7v2.2zM792.5 556.6l-169.2-0.1c-36.8 0-66.8 30-66.8 66.8V788h0.1c0 0.7-0.1 1.5-0.1 2.2 0 128.9 104.9 233.7 233.7 233.7S1024 919.1 1024 790.3c0-128.2-103.7-232.5-231.5-233.7z m-2.2 422.9c-104.3 0-189.2-84.9-189.2-189.2 0-0.7 0-1.5 0.1-2.2h-0.2V623.3c0-12.3 10-22.3 22.3-22.3h169.2v0.1c103.3 1.2 187 85.6 187 189.2 0 104.3-84.9 189.2-189.2 189.2zM400.7 556.5H231.5v0.1C103.7 557.8 0 662.1 0 790.3 0 919.1 104.9 1024 233.7 1024s233.7-104.9 233.7-233.7c0-0.7 0-1.5-0.1-2.2h0.1V623.3c0.1-36.8-29.9-66.8-66.7-66.8zM423 788c-0.1 0.8 0 1.5 0 2.3 0 104.3-84.9 189.2-189.2 189.2S44.5 894.6 44.5 790.3c0-103.6 83.7-188 187-189.2v-0.1h169.2c12.3 0 22.3 10 22.3 22.3V788z" fill="" p-id="32827"></path></svg></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">移动应用收款</p>
                        <p class="hover-text" style="color: darkgrey;">为商家的移动应用app接入微信支付完成收款需求</p>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>

                <div v-if="showCard === 'card2'">
                  <el-row>
                    <el-col :span="8">
                      <el-card class="card" style="width: 341px; height: 233px;margin-left: -20px; border-left: none;" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><svg t="1715997032973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11575" width="200" height="200"><path d="M653.312 624.128c14.336 0 25.6-11.776 25.6-25.6s-11.776-25.6-26.112-25.6H563.2l108.544-108.544c9.728-9.728 9.728-26.112-0.512-36.352-4.608-4.608-11.264-7.168-17.92-7.168-6.656 0-13.312 2.56-17.92 7.68l-122.88 122.88-123.904-122.88c-4.608-4.608-11.264-7.168-17.92-7.168-6.656 0-13.312 2.56-17.92 7.68l-0.512 0.512c-9.728 9.728-9.728 26.112 0 35.84L460.8 572.416H371.2c-13.312 0.512-24.064 11.264-24.576 24.576-0.512 14.336 10.752 26.112 24.576 26.624H486.4V680.96H371.2c-13.312 0.512-24.064 11.264-24.576 24.576-0.512 14.336 10.752 26.112 24.576 26.624H486.4v60.928c0.512 13.312 11.264 23.552 24.576 24.576h1.536c13.824 0 25.088-10.752 25.6-24.064v-60.928h115.2c13.312-0.512 24.064-11.264 24.576-24.576 0.512-6.656-2.048-13.312-6.656-18.432s-11.264-8.192-17.408-8.192h-115.2V624.64h114.688z m335.872 78.848c-51.712 0-93.696-41.984-93.696-93.696 0-25.088 9.728-48.64 27.136-66.048 17.408-17.408 40.96-27.136 66.56-27.136h4.096V338.432c0-50.176-40.96-90.624-91.136-90.624h-35.84l-353.28-204.288c-15.36-8.704-30.208-12.8-45.568-12.8h-0.512c-31.744 0-61.44 17.408-77.312 45.568l-34.304 58.88-54.784-15.36-4.096-0.512c-12.288-1.536-15.872-2.048-20.992-2.048-41.472 0-77.824 28.16-88.576 68.096l-16.896 61.952h-48.128C71.68 247.808 30.72 288.256 30.72 338.432v177.152h4.096c51.712 0 93.696 41.984 93.696 93.696 0 51.712-41.984 93.696-93.696 93.696H30.72v199.168C30.72 952.32 71.68 993.28 121.344 993.28h780.8c50.176 0 90.624-40.96 90.624-91.136v-199.168h-3.584zM433.152 101.888c6.656-11.776 19.456-19.456 33.28-19.456 6.656 0 13.824 2.048 19.968 5.12l218.624 126.464-6.144 14.336-292.864-79.36 27.136-47.104zM236.032 198.656c4.608-17.408 20.48-29.696 38.4-29.696h5.632c1.536 0 3.584 0.512 5.632 1.024l230.4 61.952-2.048-0.512v15.872H223.232l12.8-48.64z m705.536 703.488c0 21.504-17.92 38.912-39.424 38.912H121.344c-21.504 0-39.424-17.408-39.424-39.424v-155.136l5.12-2.048c56.32-22.016 92.672-75.264 92.672-135.68S142.848 495.104 87.04 473.088l-5.12-2.048V338.432c0-21.504 17.92-38.912 39.424-38.912h780.8c21.504 0 38.912 17.92 39.424 39.424v133.632l-5.12 2.048c-55.296 21.504-92.672 76.288-92.672 135.68 0 60.416 36.864 113.664 93.184 135.68l5.12 2.048v154.112z" p-id="11576"></path></svg></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">代金券营销</p>
                        <p class="hover-text" style="color: darkgrey;">商家提供代金券营销方案</p>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card class="card"style="width: 341px; height: 233px;margin-left: -15px;" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><Cellphone /></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">商家券营销</p>
                        <p class="hover-text" style="color: darkgrey;">为商家提供商家券营销方案</p>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card  class="card" style="width: 350px; height: 233px;border-left: none;margin-left: -1px" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><svg t="1715997308544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20392" width="200" height="200"><path d="M509.952 1013.248c278.528 0 504.32-225.792 504.32-504.32S788.48 4.608 509.952 4.608 5.632 230.4 5.632 508.928s225.792 504.32 504.32 504.32z m0-69.632c-240.128 0-434.688-194.56-434.688-434.688s194.56-434.688 434.688-434.688 434.688 194.56 434.688 434.688-194.56 434.688-434.688 434.688z" p-id="20393"></path><path d="M170.496 455.68l104.448 104.448c13.824 13.312 35.84 13.312 49.152-0.512 13.312-13.312 13.312-34.816 0-48.64L219.648 406.528c-13.824-13.824-35.84-13.824-49.152 0-13.824 13.824-13.824 35.84 0 49.152z" p-id="20394"></path><path d="M327.68 566.272l222.208-195.584c14.336-12.8 15.36-34.816 2.56-49.152s-34.304-15.36-48.64-3.072L281.6 514.048c-14.336 12.8-15.872 34.816-3.072 49.152s34.816 15.872 49.152 3.072z" p-id="20395"></path><path d="M504.832 371.712l267.776 309.76c12.8 14.336 34.816 15.872 49.152 3.072 14.336-12.288 15.872-33.792 3.584-48.64l-267.776-309.76c-12.8-14.336-34.816-15.872-49.152-3.072s-15.872 33.792-3.584 48.64z" p-id="20396"></path><path d="M847.36 706.56l-6.144-129.536c0-4.608-5.632-6.656-8.704-3.584l-121.856 109.568c-3.072 3.072-1.536 8.192 2.56 9.216l128 19.968c3.584 0 6.144-2.56 6.144-5.632z" p-id="20397"></path></svg></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">立减与折扣</p>
                        <p class="hover-text" style="color: darkgrey;">为商家提供立减与折扣营销方案</p>
                      </el-card>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-card class="card" style="width: 341px; height: 233px;margin-left: -28px; border-left: none;border-top: none;" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><svg t="1715996853769" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9376" width="200" height="200"><path d="M894 462c30.9 0 43.8-39.7 18.7-58L530.8 126.2a31.81 31.81 0 0 0-37.6 0L111.3 404c-25.1 18.2-12.2 58 18.8 58H192v374h-72c-4.4 0-8 3.6-8 8v52c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-52c0-4.4-3.6-8-8-8h-72V462h62zM512 196.7l271.1 197.2H240.9L512 196.7zM264 462h117v374H264V462z m189 0h117v374H453V462z m307 374H642V462h118v374z" fill="" p-id="9377"></path></svg></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">银行营销</p>
                        <p class="hover-text" style="color: darkgrey;">为银行提供活动策划和运营解决方案</p>
                      </el-card>
                    </el-col>

                    <el-col :span="8">
                      <el-card  class="card" style="width: 341px; height: 233px;border-top: none;margin-left: -15px;margin-right: 21px" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><svg t="1715996705180" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6258" width="200" height="200"><path d="M225.50755555 847.30311111c-64.85333333 0-117.76-53.58933333-117.76-119.46666666V130.84444445H59.16444445v596.992c0 92.61511111 74.63822222 168.04977778 166.3431111 168.04977777H969.38666667v-48.58311111H225.50755555z" p-id="6259"></path><path d="M246.67022222 731.93244445h124.35911111c22.64177778 0 40.96-18.31822222 40.96-40.96V421.66044445c0-22.64177778-18.31822222-40.96-40.96-40.96H246.67022222c-22.64177778 0-40.96 18.31822222-40.96 40.96v269.42577777c0 22.528 18.31822222 40.84622222 40.96 40.84622223z m7.62311111-302.6488889h109.11288889v254.06577778h-109.11288889V429.28355555zM759.46666667 731.93244445h124.35911111c22.64177778 0 40.96-18.31822222 40.96-40.96V318.57777778c0-22.64177778-18.31822222-40.96-40.96-40.96H759.46666667c-22.64177778 0-40.96 18.31822222-40.96 40.96v372.39466667c0 22.64177778 18.31822222 40.96 40.96 40.96z m7.62311111-405.73155556h109.11288889v357.14844444h-109.11288889V326.20088889zM503.01155555 731.93244445h124.35911112c22.64177778 0 40.96-18.31822222 40.96-40.96V171.80444445c0-22.64177778-18.31822222-40.96-40.96-40.96H503.01155555c-22.64177778 0-40.96 18.31822222-40.96 40.96v519.28177777c0.11377778 22.528 18.432 40.84622222 40.96 40.84622223z m7.7368889-552.5048889h109.11288888v503.92177778h-109.11288888V179.42755555z" p-id="6260"></path></svg></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">CRM管理</p>
                        <p class="hover-text" style="color: darkgrey;">为商家提供顾客分析方案</p>
                      </el-card>
                    </el-col>
                    <el-col :span="8">
                      <el-card  class="card" style="width: 341px; height: 233px;border-top: none;border-left:none;margin-left:-1px;margin-right: -10px;border-right: none" >
                        <!-- 使用 Element UI 内置图标 -->
                        <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><svg t="1715997891815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23693" width="200" height="200"><path d="M512.301176 115.215059c-273.844706 0-496.64 179.456-496.64 400.037647 0 121.042824 66.364235 233.622588 182.362353 309.925647-1.144471 11.52-8.282353 36.050824-12.815059 51.561412-14.637176 50.206118-25.208471 86.482824 2.319059 99.147294 3.915294 1.807059 8.237176 2.740706 12.845176 2.740706l0.015059 0c20.028235 0 43.956706-17.392941 84.555294-48.143059 17.754353-13.462588 46.908235-35.523765 57.825882-39.047529 54.241882 15.841882 111.269647 23.868235 169.532235 23.868235C786.160941 915.290353 1008.941176 735.834353 1008.941176 515.252706 1008.941176 294.671059 786.160941 115.215059 512.301176 115.215059zM512.301176 871.755294c-55.070118 0-108.905412-7.710118-159.984941-22.904471-2.846118-0.843294-5.888-1.28-9.020235-1.28-20.043294 0-44.001882 17.408-84.645647 48.203294-11.791059 8.929882-28.611765 21.654588-41.773176 30.238118 2.831059-12.016941 7.062588-26.593882 10.119529-37.089882 14.351059-49.197176 23.823059-81.679059 0.918588-96.256C120.696471 724.464941 59.196235 623.36 59.196235 515.252706c0-196.562824 203.264-356.487529 453.104941-356.487529 167.107765 0 313.283765 71.589647 391.830588 177.799529-81.377882 38.520471-457.050353 215.416471-486.144 212.163765-32.662588-3.614118-118.829176-79.811765-118.829176-79.811765s-31.759059-15.420235-30.840471 13.598118c0 0 90.699294 212.269176 106.134588 214.091294 15.420235 1.792 14.516706 12.679529 80.715294-29.936941 57.976471-37.330824 395.971765-232.372706 479.412706-280.470588 19.817412 40.041412 30.855529 83.546353 30.855529 129.054118C965.406118 711.830588 762.142118 871.755294 512.301176 871.755294z" p-id="23694"></path></svg></el-icon>
                        <p class="hover-text" style="font-size: 25px; margin-top: 10px;">用户连接</p>
                        <p class="hover-text" style="color: darkgrey;">为商家提供用户与服务的连接</p>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </div>


            </el-card>


<!-- 下面           -->

            <el-card style="width: 1025px;height: 699px ;margin-bottom: 100px;margin:0 auto;border-radius: 5px;margin-left: -100px">
<!--              <div style="width: 1025px;height: 299px;padding: 64px 0px 76px">    </div>-->

              <div style="font-size: 35px;margin-bottom: 40px;margin-top: 50px">合作工具箱</div>
                <p style="color: darkgrey;margin-bottom: 55px">组合场景产品能力，支持一键解锁多个能力，助力商家智慧经营</p>

              <el-row>
                <el-col :span="8">
                  <el-card class="card" style="width: 341px; height: 233px;margin-left: -20px; border-left: none;" >
                    <!-- 使用 Element UI 内置图标 -->
                    <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><ChatDotSquare /></el-icon>
                    <p class="hover-text" style="font-size: 25px; margin-top: 10px;">连锁品牌</p>
                    <p class="hover-text" style="color: darkgrey;">微信支付针对「连锁品牌商家」定制的解决方案</p>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="card"style="width: 341px; height: 233px;margin-left: -15px;" >
                    <!-- 使用 Element UI 内置图标 -->
                    <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><ShoppingBag /></el-icon>
                    <p class="hover-text" style="font-size: 25px; margin-top: 10px;">电商收付通</p>
                    <p class="hover-text" style="color: darkgrey;">微信支付专为电商行业场景打造的支付、结算解决方案</p>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card  class="card" style="width: 350px; height: 233px;border-left: none" >
                    <!-- 使用 Element UI 内置图标 -->
                    <el-icon  style="margin-top: 30px" class="hover-icon" size="50"><Monitor /></el-icon>
                    <p class="hover-text" style="font-size: 25px; margin-top: 10px;">设备服务商</p>
                    <p class="hover-text" style="color: darkgrey;">微信支付为硬件设备服务商打造的解决方案</p>
                  </el-card>
                </el-col>
              </el-row>

              <el-row>

                <el-col :span="8">
                  <el-card  class="card"style="width: 341px; height: 233px;margin-left: -28px; border-left: none;border-top:none;" >
                    <!-- 使用 Element UI 内置图标 -->
                    <el-icon name="setting" style="margin-top: 30px" class="hover-icon" size="50"><User /></el-icon>
                    <p class="hover-text" style="font-size: 25px; margin-top: 10px;">微工卡</p>
                    <p class="hover-text" style="color: darkgrey;">微信支付为灵活就业行业打造的解决方案</p>
                  </el-card>
                </el-col>
              </el-row>


            </el-card>
          </el-col>
        </el-row>

      </el-main>
      <el-footer style="background-color: rgb(50,50,50);color:#666;height: 300px;padding:50px;text-align:center;">
        <!--设置版心 定宽且居中-->
        <div style="width: 1200px;margin-left: 170px">
          <el-row :gutter="10">
            <!--底部中间区域 三列信息 注意此处内容有单独的CSS内部样式 id="footer-center"-->
            <el-col :span="12" id="footer-center" style="margin: 0 auto">
              <!--继续嵌套还是从row开始 -->
              <el-row :gutter="30">
                <el-col :span="6">
                  <h3>关于我们</h3>
                  <p>关于微信支付</p >
                  <p>合作规则</p >
                  <p>平台使用协议</p >
                  <p>支付服务协议</p >
                  <p>联系我们</p >
                </el-col>
                <el-col :span="7">
                  <h3 >服务与支持</h3>
                  <p>开发文档(商户)</p >
                  <p>开发文档(合作伙伴)</p >
                  <p>物理下载</p >
                  <p>帮助中心</p >
                </el-col>
                <el-col :span="6">
                  <h3>友情链接</h3>
                  <p>微信开放平台</p >
                  <p>微信开放平台</p >
                  <p>企业微信</p >
                </el-col>
                <el-col :span="5">
                  <h3>客服帮助</h3>
                  <p>自助服务专区</p >
                  <p>客服:95017-2</p >
                  <p>(周一到周五 09:00-18:00)</p >
                </el-col>
              </el-row>

            </el-col>
            <el-row>
              <el-col>
                <p style="font-size: 11px;color: white;height: 20px;">关注微信支付服务商助手公众号</p >
                <img src="qrcode_fuwushangzhushou.jpg" width="129px" height="129px">
              </el-col>
            </el-row>
          </el-row>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script >
export default {
  data() {
    return {
      showCard: 'card1' // 初始显示的卡片
    };
  }
};
</script>



<style scoped>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h3{
 color: #fff;
  margin-bottom: 20px;

}
p{
  margin-bottom: 5px;
}
.hover-icon {
  /* 默认图标颜色（如果需要） */
  color: #333; /* 示例颜色 */
  transition: color 0.3s ease; /* 过渡效果 */
}
.daohang{
  margin-left: 50px;
  background-color: transparent !important;
  border-bottom: none !important; /* 去除底部边框 */
  text-decoration: none !important; /* 去除文本下划线 */
  box-shadow: none !important; /* 去除底部阴影 */
}


.my-button:hover {
  /* 定义按钮在鼠标悬停时的样式 */
  color: #1CAE1BFF; /* 悬停时背景色变为蓝色 */
  /* 其他样式（如果需要）... */
}
.card:hover .hover-icon {
  /* 悬停时图标的颜色 */
  color:#1CAE1BFF; /* 示例颜色 */
}

.card:hover .hover-text {
  /* 悬停时文字的颜色 */
  color: #1CAE1BFF; /* 示例颜色 */
}

.el-card {
  box-shadow: none; /* 移除阴影效果 */
  transform: none; /* 移除任何变形效果 */
  transition: none; /* 移除过渡效果 */
  width: 100%; /* 卡片宽度占满列宽 */
  height: 233px; /* 卡片高度 */
  border-radius: 0; /* 去除边框圆角 */
  /* 如果有使用 Material Design，可能需要设置 elevation 为 0 */
  /* elevation: 0dp; */
}
</style>